<template>
  <div class="panel-body-detail">
        <span class="panel-tips">
            图片大小500KB以内
        </span>
        <div class="panel-body panel-pic">
            <div class="pic-edit-wrapper" @click="uploadImgPic" @mouseenter="showReplace=true" @mouseleave="showReplace=false">
                <!-- <img :src="selectItem.content" alt=""> -->
                <span v-if="selectItem.content"><img :src="selectItem.content" alt="" ></span>
                <span v-show="showReplace&&selectItem.content" @click.stop.prevent="uploadImgPic(selectItem.content)" class="replace-img">
                    <b>替换图片</b>
                </span>
            </div>
            <div class="optional-title">链接至：</div>
            <div class="link">
                <articleListType v-model="selectItem.article.cateId" :select-class="['article-select','com-select']"></articleListType>
                <articleDetailList v-model="selectItem.article.artId" :select-class="['article-select','com-select']" :article-type="selectItem.article.cateId"></articleDetailList>
            </div>
        </div>
        <div class="wrapper-dialog" v-if="dialogVisible">
            <el-dialog 
                title="上传图片"
                :visible.sync="dialogVisible"
                :before-close="handleClose"
                :class="['dialog-upload-img']"
                :modal="false"
            >
                <div class="dialog-upload-wrapper">
                    <file-upload 
                            ref="fileUploadComp"
                            class="file-uploadout"
                            :img-size="0.48828125"
                            @onSuccess="onSuccess"
                             @remove="handleRemove"
                            :file-list.sync="arr" 
                            :file-list-show.sync="fileListShow">
                                <div class="up-container el-upload el-upload--text">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div> 
                    </file-upload>
                    <span class='tip-slot'>上传图片格式jpg、png、gif、jpeg</span>
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-col>
                            <el-button @click="cancleDialog">取消</el-button>
                            <el-button @click="setItemPic" type="primary" :disabled="disabled">确定</el-button>
                        </el-col>    
                    </el-row>    
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import FileUpload from 'components/Upload/fileUpload';
import articleListType from './articleListType';
import articleDetailList from './articleDetailList';
import {mapGetters, mapMutations} from 'vuex';
export default {
    name: 'picPanel',
    components: {
        draggable,
        FileUpload,
        articleListType,
        articleDetailList
    },
    data() {
        return {
            dialogVisible: false,
            arr: [],
            fileListShow: true,
            pic: '',
            disabled: true,
            showReplace: false
        }
    },
    computed: {
        ...mapGetters([
            'selectItem',
            'selectIndex',
            'phoneData'
        ])
    },
    methods: {
        ...mapMutations([
            'SET_PANELDATA'
        ]),
        handleClose() {
            // 
            this.hideDialogUpload();
        },
        onSuccess(data) {
            // 
            if (data&&data.imgUrl) {
                this.disabled = false;
                this.pic = data.imgUrl;
            } else {
                this.$message({
                    type: 'error',
                    message: '上传图片出现问题'
                })
            }
        },
        // 删除图片调用的事件
        handleRemove() {
            // //console.log(1221212, 'remove');
            // 弹窗确认置灰
            this.disabled = true;
        },
        uploadImgPic(picUrl) {
            // 
            this.dialogVisible = true;
            this.arr = [{name: '', url: picUrl}];
        },
        hideDialogUpload() {
            this.$refs.fileUploadComp.clearFiles();
            this.dialogVisible = false;
        },
        cancleDialog() {
            this.hideDialogUpload();
            this.disabled = true;
        },
        setItemPic() {
            this.updateItemPic();
            this.handleClose();
            this.$refs.fileUploadComp.clearFiles();
        },
        updateItemPic() {
            this.SET_PANELDATA({
                type: 'pic',
                index: this.selectIndex,
                pic: this.pic
            });
        }
    }
}
</script>

<style lang="scss">
    .panel-tips {
        display: inline-block;
        padding-bottom: 10px;
        color: #7a7a7a;
    }
    .panel-pic {
        .optional-title {
            font-size: 12px;
            color: #7a7a7a;
            margin: 10px 0;
            font-family: MicrosoftYaHeiLight, '黑体';
        }
        .article-select {
            margin-bottom: 10px;
        }
        .com-select {
            width: 280px;
        }
        .pic-edit-wrapper {
            cursor: pointer;
            overflow: hidden;
            position: relative;
            img{
                width: 100%;
                vertical-align: middle;
            }
            
        }
        .replace-img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(27, 27, 27, 0.52);
            text-align: center;
            b {
                position: absolute;
                top: 50%;
                left: 50%;
                line-height: 100%;
                color: #fff;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        }
    }
</style>
